<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="util.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid palegoldenrod;
            padding: 5px;
            overflow: auto;
            position: absolute;
            top: 0;
            left: 30px;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p>   
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p>
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p>
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p>
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
        <p>1</p> 
    </div>
    <script>
        var div = document.querySelector('div')
        // div.style.width = '250px'  style 只能设置和获取内联样式
        var w = getstyle(div,'width')
        var h = getstyle(div,'height')
        // console.log(w,h)
        
        var cont1 = div.clientWidth   //宽高++padding值 ----
        console.log(cont1)
        var cont2 = div.offsetWidth
        console.log(cont2)  //宽高+padding+border
        var cont3 = div.scrollHeight
        console.log(cont3)

        var w1 = div.clientLeft //边框宽度
        var w2 = div.clientTop
        console.log(w1,w2)

        div.onscroll = function(){
            var w3 = div.scrollTop  //滚动内容的高度
            var w4 = div.scrollLeft 
            console.log(w3,w4)
        }

        var w5 = div.offsetTop
        var w6 = div.offsetLeft
        console.log(w5,w6)
        
    </script>
</body>
</html>